import React from 'react';
import styles from './TeacherSelectList.less';
import {Input,Row,Col,Icon,Spin} from 'antd'

function TeacherSelectCard({target,onSelect}){
    return (
        <Row gutter={0} className={styles.SelectCard} onMouseUp={()=>{
            onSelect();
        }}>
            <Col span={8} >
                <Icon type='android' className={styles.CardImage}/>
            </Col>
            <Col span={16} >
                <span className={styles.CardBody}>{target.name}</span>
            </Col>
        </Row>
    )
}
class TeacherSelectList extends React.Component{
    constructor(){
        super();
        this.state={
            filter:''
        }
    }

    render () {
        const {teachers,selected,onSelect,loading} = this.props;
        let _ts = teachers.filter(teacher=>_.startsWith(pinyinUtil.getFirstLetter(teacher.name),this.state.filter));
        console.log(_ts)
        return (
            <Spin spinning={loading}>
                <Input placeholder="搜索" onChange={v=>this.setState({filter:v.target.value.toUpperCase()})}/>
                <div style={{maxHeight:600,overflowY:'scroll'}}>{_ts.map((v,k)=>
                    <TeacherSelectCard target={v} key={k} selected={selected?selected.id==v.id:false} onSelect={()=>{
                        onSelect(v);
                    }}/>
                )}</div>
            </Spin>
        );
    }
}

export default TeacherSelectList;
